<template>
	<view class="bf h100v">
		<view class="topBox">
			<view class="top1l">
				<u-subsection
					:list="tList"
					:animation="false"
					bgColor="#F4F4F4"
					font-size="26"
					button-color="#FE9367"
					active-color="#ffffff"
					inactive-color="#000"
					height="80" 
					:current="navIdx" 
					@change="typeChange" />
			</view>
		</view>
		
		<view class="searchOrder bf6 f-s-c c9">
			<text class="iconfont iconss f28"></text>
			<u-input class="searchOrderText f24" style="width: 600rpx;"
			 v-model="query.keyword" :clearable="false"  trim placeholder="请输入订单相关信息"
			 confirm-type='search'
			 @input="search" />
		</view>
		
		<custom-swiper @changePage="changePage" ref="swiper" :list="tabs[navIdx]" :bold="true">
			<template v-for="(item, index) of tabs[navIdx]" :slot="'swiper-item-' + (index + 1)">
				<scroll-view v-if="sarr.length" :key="index" class='ws-n p03 sarr bf pt10'  scroll-x='true'>
					<block v-for="(v,i) in sarr" :key='i'>
						<view @click="clickSarr(i)" class='f-g-0 mr15 bs10 c6 dis-in sarri f28 t-c' :class="{wei:v.active}" :style="{background:v.active?`rgba(${cTR(tColor)},1)`:'',color:v.active?'#ffffff':'#000'}">{{v.name}}</view>
					</block>
				</scroll-view>
				<order-info-list :scroll-y='CanScrollY' :downPull="downPull" @nextPage="nextPage" @refresh="refresh" :order-type="query.orderType" :data="data" :key='item.id' />
			</template>
		</custom-swiper>
		<u-calendar
			v-model="showrl"
			mode="range"
			:btnstyle="{ background: '#FE9367' }"
			range-color="#FE9367"
			range-bg-color="rgba(253,215,75,0.2)"
			active-bg-color="#FE9367"
			@change="changeDate"
		></u-calendar>
		
	</view>
</template>

<script>
	import CustomSwiper from '@/components/custom-tabs-page-linkge/tab-page-linkage.vue';
	import OrderInfoList from "./components/OrderInfoList"
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	export default {
		components: {
			CustomSwiper,
			OrderInfoList
		},
		mixins: [utilMixins],
		data(){
			return{
				showrl:false,
				downPull:false,
				CanScrollY:false,
				navIdx:0,
				query:{
					orderType:'1',//1堂食    2快餐
					page:1,
					state:1,// 订单状态  0不限 1待完成 2已完成 3取消
					keyword:'',
					timeType:1 ,//1今天 2近七天 3近十五天 4具体时间startTime    endTime
					startTime:'',
					endTime:''
				},
				page: {
					size: 10 //固定返回10个数据
				},
				data:[],
				tabs: [
					//桌台订单
					[{
						name: '待完成',
						state: '1'
					},
					{
						name: '已完成',
						state: '2' 
					}],
					// 收银订单
					[{
						name: '待完成',
						state: '1'
					},
					{
						name: '已完成',
						state: '2'
					},{
						name: '已取消',
						state: '3'
					},
					{
						name: '全部',
						state: '0'
					}]
				],
				tList: [
					{
						name: '堂食订单'
					},
					{
						name: '快餐订单'
					}
				],
				sarr:[
					{
						name: '今天',
						active:true,
						timeType:1
					},
					{
						name: '近七天',
						active:false,
						timeType:2
					},
					{
						name: '近十五天',
						active:false,
						timeType:3
					},
					{
						name: '具体时间',
						active:false,
						timeType:4
					}
				]
			}
		},
		onPageScroll(e){
			if(e.scrollTop === 0){
				this.CanScrollY = false
			}
		},
		onReachBottom(){
			this.CanScrollY = true
		},
		onShow() {
			this.data = []
			this.fetchData()
		},
		methods:{
			search(){
				this.refresh()
			},
			nextPage(){
				this.query.page ++
				this.fetchData()
			},
			async refresh(){
				this.downPull = true
				this.data = []
				this.query.page = 1
				console.log('abc:',this.data)
				await this.fetchData()
				this.downPull = false
			},
			async fetchData(){
				try{
					let {data} = await this.util.request({
						'url': this.api.instoreOrderList,
						data:this.query
					})
					 this.data = this.data.concat(data)
				}catch(e){
					this.util.message(e.msg, 3)
				}
			},
			typeChange(e){
				this.navIdx = e
				this.query.orderType =1 + +e
				this.refresh()
			},
			clickSarr(index){
				this.sarr.forEach((item,i) =>{
					if(i === index){
						item.active = true 
						this.query.timeType = item.timeType
					}else{
						item.active = false 
					}
				})
				if(this.query.timeType != 4){
					this.query.startTime = ''
					this.query.endTime = ''
					this.refresh()
				}else{
					this.showrl = true
				}
			},
			changeDate(e){
				this.query.startTime = e.startDate
				this.query.endTime = e.endDate
				this.refresh()
			},
			changePage(e){
				var list = this.tabs[this.navIdx]
				this.query.state = list[e].state
				this.refresh()
			}
		}
	}
</script>

<style scoped lang="scss">
	.topBox{
		padding-top: 20rpx;
		.top1l {
			width: 614rpx;
			margin: 0 auto;
		}
	}
	.searchOrder {
			width: 700rpx;
			height: 65rpx;
			border-radius: 10rpx;
			padding: 6rpx 20rpx;
			margin:20rpx auto;
			.searchOrderText {
				margin-left: 10rpx;
			}
		}
	.sarr {
		height: 84rpx;
	
		.sarri {
			background: #F8F8F6;
			line-height: 64rpx;
			width: 158rpx;
			height: 64rpx;
		}
	}
</style>
